<template>
  <modal :show.sync="show" effect="zoom" title="修改密码" callback:="updatePwd">
    <div slot="modal-body" class="modal-body">
      <validator name="modifyPwdForm">
        <form>
          <div class="form-group">
              <label for="oldPassword">原密码</label>
              <input type="password" class="form-control" v-model="account.password" id="oldPassword" placeholder="输入原密码"  initial="off" detect-change="off" v-validate:password="{'required':true,'minlength':8}">
              <div>
                <error-template v-show="$modifyPwdForm.password.required">{{$modifyPwdForm.password.required}}</error-template>
                <error-template v-show="!$modifyPwdForm.password.required&&$modifyPwdForm.password.minlength">{{$modifyPwdForm.password.minlength}}</error-template>
              </div>
          </div>
          <div class="form-group">
              <label for="newPassword">新密码</label>
              <input type="password" class="form-control" v-model="account.newPassword" id="newPassword" placeholder="输入新密码"  initial="off" detect-change="off" v-validate:new-password="{'required':true,'minlength':8}">
              <div>
                <error-template v-show="$modifyPwdForm.newPassword.required">{{$modifyPwdForm.newPassword.required}}</error-template>
                <error-template v-show="!$modifyPwdForm.newPassword.required&&$modifyPwdForm.newPassword.minlength">{{$modifyPwdForm.newPassword.minlength}}</error-template>
              </div>
          </div>
          <div class="form-group">
              <input type="password" class="form-control" v-model="account.rePassword" id="rePassword" placeholder="重复新密码"  initial="off" detect-change="off" v-validate:re-password="{'required':true,'repeat':account.newPassword}">
              <div>
                <error-template v-show="$modifyPwdForm.rePassword.required">{{$modifyPwdForm.rePassword.required}}</error-template>
                <error-template v-show="!$modifyPwdForm.rePassword.required&&$modifyPwdForm.rePassword.repeat">{{$modifyPwdForm.rePassword.repeat}}</error-template>
              </div>
          </div>
        </form>
      </validator>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default"  @click="this.show = false">取消</button>
      <button type="button" class="btn btn-success"  @click="updatePwd">确定</button>
    </div>
  </modal>
</template>

<script>
/**
 * @author: guocailee
 */

import { updatePassword } from 'src/api/security'

export default {
  props: {
    show: {
      required: true,
      type: Boolean,
      twoWay: true
    }
  },
  data: () => {
    let account = {
      password: null,
      newPassword: null,
      rePassword: null
    }
    return { account }
  },
  methods: {
    updatePwd() {
      var self = this
      this.$validate(true, () => {
        if (self.$modifyPwdForm.invalid) {
          return
        }
        updatePassword(this.account).then(data => {
          self.$notify.success('修改成功')
          self.account.password = null
          self.account.newPassword = null
          self.account.rePassword = null
          self.show = false
        }).catch(data => {
          self.$notify.error(data)
        })
      })
    }
  }
}
</script>
<style>

</style>